<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import {ContactsOutlined,CalendarOutlined,PhoneOutlined,WechatOutlined,MailOutlined} from '@ant-design/icons-vue'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import {message} from 'ant-design-vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {userUserStore} from "@/stores/index.js";
import {setStuInfo} from "@/views/resumeCreation/components/contentEdit/share.js";
import {updateStuInfo} from "@/api/stu.js";

const dateFormat = 'YYYY/MM/DD';
const formData = reactive({
  email:  userUserStore().userInfo.email,
  phone: userUserStore().userInfo.phone,
  realName:  userUserStore().userInfo.realName,
  gender:  userUserStore().userInfo.gender,
  wechatNum:  userUserStore().userInfo.wechatNum,
  birth:  userUserStore().userInfo.birth,
});
const avatar = ref(userUserStore().userInfo.profilePicturePath)

let FormattedTime = ref()
const getFormattedTime = () =>{
  if (!formData.birth) return
  FormattedTime.value = dayjs(formData.birth).format(dateFormat)
}

const transDayTime = () =>{
  if (!formData.birth) return
  formData.birth = dayjs(formData.birth)
}

const isCardSelected = ref(false);
const cancel = async () => {
  const resGet = await setStuInfo();  // 等待更新学生信息
  if ( resGet === 200) {
  }
  isCardSelected.value=false
}

const submit = async () => {
  getFormattedTime()
  try {
    const resUpdate = await updateStuInfo({
      realName: formData.realName,
      gender: formData.gender,
      birth: formData.birth,
      wechatNum: formData.wechatNum,
    })
    isCardSelected.value = false;
    if (resUpdate.data.code === 200) {
      message.success("提交成功");

      // 更新学生信息
      const resGet = await setStuInfo();  // 等待更新学生信息
      if ( resGet === 200) {
      }
    } else {
      message.error(resUpdate.data.message);
    }
  } catch (err) {
    message.error(err.message || "提交失败");
  }
};

const selectCard = () =>{
  isCardSelected.value = true
   transDayTime()
}

// 日期的限制
const disabledDate = current => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return current && current > today
}

// 计算当前年龄
const age = computed(() => {
  if (!formData.birth) return null;
  return Math.floor(dayjs().diff(formData.birth, 'year',true))
});

//图标样式
const iconStyle = {
  color: "#9c9c9c",
  marginRight: "5px",
  fontSize: "18px"
}

dayjs.locale('zh-cn');
</script>

<template>
  <div class="edit-container" v-if="isCardSelected">
    <h4 style="height: 40px;margin-top: 0">编辑个人信息</h4>
    <a-form class="form">
      <a-row :gutter="80">
        <a-col :span="12">
          <a-form-item>
            <h4>姓名</h4>
            <a-input placeholder="请输入姓名" v-model:value="formData.realName"/>
          </a-form-item>
          <a-form-item>
            <h4>性别</h4>
            <a-radio-group
                buttonStyle="solid"
                v-model:value="formData.gender"
                size="large"
                class="gender-item">
              <a-radio-button value="男">男</a-radio-button>
              <a-radio-button value="女">女</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item>
            <h4>出生年月</h4>
            <a-date-picker
                :format="dateFormat"
                v-model:value="formData.birth"
                placeholder="请选择出生日期"
                :disabled-date="disabledDate"
                :locale="locale"
                style="width: 100%;height: 40px"
            />
          </a-form-item>
          <a-form-item>
            <h4>邮箱(选填)</h4>
            <a-input placeholder="请输入邮箱" v-model:value="formData.email" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <h4>电话</h4>
            <a-input placeholder="请输入电话" v-model:value="formData.phone" disabled></a-input>
          </a-form-item>
          <a-form-item>
            <h4>微信号(选填)</h4>
            <a-input placeholder="请输入微信号" v-model:value="formData.wechatNum"></a-input>
          </a-form-item>
          <a-form-item>
            <div class="button-item">
              <a-button type="default" size="large" @click="cancel">取消</a-button>
              <a-button type="primary" size="large" @click="submit">确认</a-button>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
  <div class="default-container" @click="selectCard" v-else>
    <h2 v-if="!formData.realName">未设置姓名</h2>
    <h2 v-if="formData.realName">{{formData.realName}}</h2>
    <a-avatar :src="avatar" :size="80" class="personal-avatar"/>
    <div class="user-info">
      <span v-if="formData.gender">
        <ContactsOutlined :style="iconStyle"/>
        {{formData.gender}}
      </span>
      <span>
        <CalendarOutlined :style="iconStyle"/>
        {{age}}岁
      </span>
      <span v-if="formData.phone">
        <PhoneOutlined :style="iconStyle"/>
        {{formData.phone}}
      </span>
      <span v-if="formData.wechatNum">
        <WechatOutlined :style="iconStyle"/>
        {{formData.wechatNum}}
      </span>
      <span v-if="formData.email">
        <MailOutlined :style="iconStyle"/>
        {{formData.email}}
      </span>
    </div>
  </div>
</template>

<style scoped>
.edit-container {
  width: 100%;
  height: 100%;
  background-color: #f5f6fa;
  padding: 20px;
  border-radius: 10px;
}

.default-container {
  width: 100%;
  padding: 20px;
  cursor: pointer;
  position: relative;
}

.form {
  h4 {
    color: #454647;
  }
  .ant-input {
    height: 40px;
  }
}

.ant-radio-group {
  width: 100%;
}

.ant-radio-button-wrapper {
  width: 50%;
}

.personal-avatar{
  position: absolute;
  right: 10px;
  top: 10px;
}

.user-info {
  width: 80%;
  margin-top: 20px;
  margin-left: 3px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  >span {
    display: flex;
    font-size: 14px;
    align-items: center;
  }
}

.default-container:hover {
  background-color: #e6f7ff;
}

.button-item {
  display: flex;
  margin-top: 120px;
  margin-left: 100px;
  justify-content: space-around;
}

a-button {
  margin-top: 8px;
  border: none;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

a-button:hover {
  background-color: #66bb69;
}

.title {
  width: 4px;
  height: 25px;
  background: #00bebd;
  border-radius: 3px;
  margin-top: -8px;
  margin-right: 10px;
}
</style>
